import React, { useState, useEffect } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { ScrollView, View, Text, Image, TouchableOpacity } from 'react-native'
import { ShortBar, InfoLayout, ChangeCard, Division, Toast } from 'components'
import { formatMoney, getMoneyFen } from 'utils'
import { commonStyle } from 'styles'
import { recognitionConfirmStyle } from './styles'
import InputMoney from 'components/InputMoney'
import pos, { PosAppTrade, PosAppCustomer, PosAppFee, PosAppBankIuput, PosAppBank } from 'api/pos'
import { PosModule } from 'native-modules';
import { getAuthorization, setLogin } from 'services/authorization'
import asssets from 'modules/assets'
import assets from 'modules/assets'
import PayButton from './components/PayButton';
import Loading from 'components/loading';

const RecognitionConfirmScreen: NavigationStackScreenComponent<{
	tradeInfo: PosAppTrade
	bankList?: PosAppBank[]
	scene: string
	// customerInfo: PosAppCustomer
}> = props => {
	const [customerData, setCustomerData] = useState<PosAppCustomer>({})
	const [tradeData, setTradetData] = useState<PosAppTrade>({ feeList: [] })
	const [money, setMoney] = useState(0.00)
	const [bankList, setBankList] = useState<PosAppBank[]>([])
	const [bank, setBank] = useState<PosAppBank>({})

	useEffect(() => {
		let tradeInfo = props.navigation.getParam('tradeInfo')
		let bankList = props.navigation.getParam('bankList')
		console.log('trade', JSON.stringify(tradeInfo))
		console.log('trade', JSON.stringify(bankList))

		let sumYe = 0

		tradeInfo.feeList.map((f: PosAppFee) => {
			sumYe += getMoneyFen(f.ye)
			return
		})
		setTradetData(tradeInfo)
		setCustomerData(tradeInfo.customer || {})
		// bankList.length > 0 && setBank(bankList[0])

		setMoney(sumYe / 100)
	}, [props.navigation.getParam('tradeInfo')])

	useEffect(() => {
		loadBank()
	}, [props.navigation.getParam('tradeInfo'), getAuthorization().project.id])

	const loadBank = () => {
		// 通过款项获取银行
		let posAppBankIuput = {} as PosAppBankIuput
		posAppBankIuput.erpFeeIds = props.navigation.getParam('tradeInfo').feeList.map(f => { return f.erpId })
		posAppBankIuput.projectId = getAuthorization().project.id
		posAppBankIuput.mac = getAuthorization().mac
		posAppBankIuput.scene = props.navigation.getParam('scene')
		pos.posApp.getBankByScene(posAppBankIuput).then(res => {
			setBankList(res || [])
			if (res && res.length === 1) {
				setBank(res[0])
			}
		})
	}


	const renderChoose = (item: PosAppFee) => {
		return (
			<View
				key={item.id}
				style={[commonStyle.containerColumn, recognitionConfirmStyle.projectContainer]}>
				<ShortBar title={item.fundName} />
				<View style={[commonStyle.containerRow, recognitionConfirmStyle.projectInfoContainer]}>
					<Text style={commonStyle.amountStyle}>{item.ye}</Text>
					{/* <Text style={commonStyle.tag}>收取POS机手续费</Text> */}
				</View>
			</View>
		)
	}

	return (
		<ScrollView>
			<View style={[commonStyle.containerColumn, recognitionConfirmStyle.container]}>
				<ShortBar style={recognitionConfirmStyle.userInfo} title="客户信息" />
				<InfoLayout title="客户名称:" content={customerData.name || ''} />
				<InfoLayout
					title="证件号码:"
					titlePartner={<Text style={commonStyle.tag}>{customerData.zjType || '身份证'}</Text>}
					content={customerData.zjNumber || ''}
				/>
				<InfoLayout title="电话号码" content={customerData.tel || ''} />
				<View style={recognitionConfirmStyle.projectList}>
					{tradeData.feeList && tradeData.feeList.map((item, index) => (
						<View key={index}>
							{renderChoose(item)}
							{index == tradeData.feeList.length - 1 ? <React.Fragment /> : <Division />}
						</View>
					))}
				</View>
				<InfoLayout title="本次收款金额:" hideDivier={true} />
				<InputMoney
					key={money}
					// upperLimit={9999999991}
					defaultValue={money}
					onChange={money => { }}
					editable={false}
				/>
				<Division />
				<ChangeCard bank={bank} bankList={bankList} onPress={(bank: PosAppBank) => { setBank(bank) }} />
				<PayButton onPress={(type: 'scan' | 'card') => {
					// pay(type)
				}} bank={bank} customer={customerData} feeList={tradeData.feeList} money={money} scene={props.navigation.getParam('scene')} refId={tradeData.erpId} />
			</View>
		</ScrollView>
	)
}

RecognitionConfirmScreen.navigationOptions = props => {
	return {
		title: '确认款项',
	}
}

export default RecognitionConfirmScreen
